<template>
  <v-container fluid>
    <v-row justify="center">
      <v-col sm="4" md="4" lg="3">
        <v-card>
          <v-img src="../assets/login/background.png" class="white--text align-center" alt="基本信息">
            <v-card-title>基本信息</v-card-title>
          </v-img>
          <v-form ref="baseInformationForm" v-model="valid" lazy-validation>
            <v-card-text>
              <v-text-field v-model="user.firstName" :rules="firstNameRules" label="姓"></v-text-field>
              <v-text-field v-model="user.lastName" :rules="lastNameRules" label="名"></v-text-field>
              <v-radio-group v-model="user.sex" row>
                <v-radio color="blue" value="1" label="男"></v-radio>
                <v-radio color="pink" value="2" label="女"></v-radio>
                <v-radio color="yellow" value="0" label="保密"></v-radio>
              </v-radio-group>
              <v-text-field v-model="user.location" label="所在地"></v-text-field>
              <v-menu
                ref="menu"
                v-model="menu"
                :close-on-content-click="false"
                transition="scale-transition"
                offset-y
              >
                <template v-slot:activator="{ on, attrs }">
                  <v-text-field
                    v-model="user.birthday"
                    label="生日"
                    prepend-icon="mdi-calendar"
                    readonly
                    v-bind="attrs"
                    v-on="on"
                  ></v-text-field>
                </template>
                <v-date-picker
                  ref="picker"
                  v-model="user.birthday"
                  :max="new Date().toISOString().substr(0, 10)"
                  min="1950-01-01"
                  @change="save"
                ></v-date-picker>
              </v-menu>
              <!--保存按钮-->
              <v-btn :disabled="!valid" color="primary" class="mr-4" v-on:click="validate">保存</v-btn>
            </v-card-text>
          </v-form>
        </v-card>
      </v-col>
    </v-row>
    <v-snackbar
      v-model="snackbar"
    >
      基本信息修改成功
      <template v-slot:action="{ attrs }">
        <v-btn
          color="pink"
          text
          v-bind="attrs"
          @click="snackbar = false"
        >
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </v-container>
</template>

<script>
export default {
  name: 'BaseInformation',
  data: () => ({
    snackbar: false,
    user: {
      firstName: '',
      lastName: '',
      sex: '0',
      location: '',
      birthday: null
    },
    valid: true,
    menu: false,
    firstNameRules: [
      v => !!v || '姓不能为空',
      v => (v.length >= 1 && v.length <= 10) || '姓应该在2-20个字符之间'
    ],
    lastNameRules: [
      v => !!v || '名不能为空',
      v => (v.length >= 1 && v.length <= 10) || '名应该在2-20个字符之间'
    ]
  }),
  methods: {
    save (birthday) {
      this.$refs.menu.save(birthday)
    },
    validate () {
      const valid = this.$refs.baseInformationForm.validate()
      if (valid) {
        this.$axios.patch('rest_auth/user/', {
          first_name: this.user.firstName,
          last_name: this.user.lastName,
          sex: parseInt(this.user.sex),
          location: this.user.location,
          birthday: this.user.birthday
        }).then(response => {
          console.log(response)
          // 更新成功后重新设置state.user
          this.$store.commit('setUser', response.data)
          // 更新成功后弹出消息条
          this.snackbar = true
        }).catch(error => {
          console.log(error)
        })
      }
    }
  },
  watch: {
    menu (val) {
      val && setTimeout(() => (this.$refs.picker.activePicker = 'YEAR'))
    }
  },
  created () {
    this.user.firstName = this.$store.state.user.first_name ? this.$store.state.user.first_name : ''
    this.user.lastName = this.$store.state.user.last_name ? this.$store.state.user.last_name : ''
    this.user.sex = this.$store.state.user.sex ? this.$store.state.user.sex.toString() : '0'
    this.user.location = this.$store.state.user.location ? this.$store.state.user.location : ''
    this.user.birthday = this.$store.state.user.birthday ? this.$store.state.user.birthday : null
  }
}
</script>

<style scoped>

</style>
